<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    
    <div class="products">
      <h2>商品</h2>
      <div class="product" v-for="product in products" :key="product.id">
        {{ product.name }} - ¥{{ product.price }}
        <button @click="addToCart(product)">添加</button>
      </div>
    </div>
    
    <Cart />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import Cart from '@/components/Cart.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld,
    Cart
  },
  data() {
    return {
      products: [
        { id: 1, name: '手机', price: 1000 },
        { id: 2, name: '电脑', price: 2000 },
        { id: 3, name: '键盘', price: 200 }
      ]
    }
  },
  methods: {
    addToCart(product) {
      this.$store.dispatch('addToCart', product);
    }
  }
}
</script>

<style scoped>
.products {
  text-align: center;
  margin-top: 30px;
}
.product {
  margin-bottom: 10px;
}
</style>